<template>
  <div style="background: #f8f8f9">
    <Card title="发送信息" icon="md-paper-plane" :padding="0" shadow style="width: 100%;">
      <CheckboxGroup slot="extra" v-model="ports" v-if="getCurPorts.length">
        <Checkbox v-for="port in getCurPorts" :label="port.path"></Checkbox>
        <Button type="success" @click="sendMessage('sendMessageDate')">send</Button>
      </CheckboxGroup>
      <span v-else slot="extra">没有打开的串口</span>
      <Scroll :height="getButtomHeight">
        <Form
          ref="sendMessageDate"
          :model="sendMessageDate"
          :rules="sendRuleValidate"
          :label-width="80"
          label-colon
          @submit.native.prevent
        >
          <FormItem label="格式" prop="encoding">
            <RadioGroup v-model="sendMessageDate.encoding">
              <Radio label="hex">HEX</Radio>
              <Radio label="ascii">ASCII</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="数据" prop="text">
            <Input
              v-model="sendMessageDate.text"
              maxlength="100"
              show-word-limit
              placeholder="hex数据使用“,”逗号分隔"
              size="large"
            ></Input>
          </FormItem>
        </Form>
      </Scroll>
    </Card>
  </div>
</template>
<script>
import ISEMPTY from "lodash/isEmpty";
import FINDINDEX from "lodash/findIndex";
import REMOVE from "lodash/remove";
import PICK from "lodash/pick";
import filter from "lodash/filter";
import toNumber from "lodash/toNumber";
import SOME from "lodash/some";
import METHOD from "lodash/method";
export default {
  computed: {
    getButtomHeight: function () {
      return this.$store.getters.getBottomHeight - 36 - 51;
    },
    getCurPorts: function () {
      return filter(Object.values(this.$store.getters.getCurPorts), "open");
    },
  },
  data() {
    return {
      ports: [],
      sendMessageDate: {
        text: "",
        encoding: "hex",
      },
      sendRuleValidate: {
        text: [
          {
            required: true,
            message: "文本不能为空，且仅支持字母和数字",
            trigger: "blur",
            validator: (rule, value) => {
              var reg = /^[0-9a-zA-Z]{1,}$/;
              if (reg.test(value)) {
                return true;
              }
              return false;
            },
          },
        ],

        encoding: [
          {
            required: true,
            message: "请选择数据编码格式",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    sendMessage: function (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.ports.length) {
            let sendMessage = this.sendMessageDate.text;
            let encoding = this.sendMessageDate.encoding;
            if (encoding == "hex") {
              sendMessage = this.sendMessageDate.text.split(",");
              //  sendMessage =sendBuffer.map(value=>parseInt(value,16))
            }
            console.log(sendMessage);
            this.ports.forEach((port) => {
              console.log(port);
              this.$store
                .dispatch("reqPortSendMessage", { port, sendMessage, encoding })
                .then((Number) => {
                  console.log("取得写入数量");
                  if (Number) {
                    this.$Message.success("成功写入" + Number + "字节!");
                  }
                })
                .catch((err) => {
                  console.log("发送异常处理");
                  this.$Message.error(err);
                });
            });
          } else {
            this.$Message.error("请选择发送数据的串口!");
          }
        } else {
          this.$Message.error("请确认发送数据!");
        }
      });
    },
  },
};
</script>


